<template>
  <div class="tab-pane-cover" v-if="current !== null">
    <div class="setup-attr">
      <!-- 功能名称 -->
      <div
        class="field-module module"
        v-if="$srv.getx(panelItems, 'funName.isShow', false)"
      >
        <div class="tab-box">
          <span class="title">
            {{ $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.functionname') }}
          </span>
          <!-- :disabled="current.config.isCreated" -->
          <o-i18n-selector
            :disabled="panelItems.funName.disabled"
            :modelvalue="
              $srv.getx(
                current,
                'config.name',
                panelItems.funName.defVal,
                v => {
                  current.config.name = v;
                }
              )
            "
            @model-change="
              v => {
                current.config.name = v;
                saveDetailToConfig();
              }
            "
            @on-blur="onFunNameBlur"
            :placeholder="
              current.name.toLowerCase() === 'baseview'
                ? $srv.getI18nByPath(
                    'oSetupPanel.SetupAttrDetail.enterviewname'
                  )
                : $srv.getI18nByPath(
                    'oSetupPanel.SetupAttrDetail.enterfunctionname'
                  )
            "
            :compBoxInfo="GT_compBoxInfo"
          ></o-i18n-selector>
        </div>
        <!-- 功能注解 -->
        <div
          class="tab-box"
          v-if="$srv.getx(panelItems, 'funNote.isShow', false)"
        >
          <span class="title">
            {{
              $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.functionnotes')
            }}
          </span>
          <!-- v-model="current.config.comment" -->
          <Input
            :disabled="panelItems.funNote.disabled"
            type="textarea"
            :value="
              $srv.getx(
                current,
                'config.comment',
                panelItems.funNote.defVal,
                v => {
                  current.config.comment = v;
                }
              )
            "
            @input="
              v => {
                current.config.comment = v;
                saveDetailToConfig();
              }
            "
            @on-blur="saveDetailToConfig"
            :placeholder="
              $srv.getI18nByPath(
                'oSetupPanel.SetupAttrDetail.enterfunctionnotes'
              )
            "
          />
        </div>
        <div class="divider-empty"></div>
        <!-- 引用功能 -->
        <div
          class="ref-comp"
          v-if="$srv.getx(panelItems, 'refComp.isShow', false)"
        >
          <span class="title">
            <strong>{{ $srv.getI18nByValue('引用功能') }}</strong>
            <Icon
              class="add"
              size="16"
              type="ios-add-circle"
              @click="
                () => {
                  current.config.refComps.push({ value: null });
                  saveDetailToConfig();
                }
              "
            />
          </span>

          <span
            class="ref-comp-table"
            v-for="(item, idx) in current.config.refComps"
            :key="idx"
          >
            <span class="m2o">
              <o-m2o-editor
                :disabled="$srv.getx(panelItems, 'refComp.disabled', true)"
                :value="item.value"
                @model-change="
                  e => {
                    item.value = e;
                    saveDetailToConfig();
                  }
                "
              />
            </span>

            <Icon
              class="remove"
              size="16"
              type="md-remove-circle"
              @click="
                () => {
                  current.config.refComps.splice(idx, 1);
                  saveDetailToConfig();
                }
              "
            />
          </span>
        </div>
        <!-- 多表form配置 -->
        <div
          class="ref-comp"
          v-if="$srv.getx(panelItems, 'multiForm.isShow', false)"
        >
          <span class="title">
            <strong>{{ $srv.getI18nByValue('关联表格') }}</strong>
            <Icon
              class="add"
              size="16"
              type="ios-add-circle"
              @click="
                () => {
                  current.config.multiTables.push({ value: null });
                  saveDetailToConfig();
                }
              "
            />
          </span>

          <span
            class="ref-comp-table"
            v-for="(item, idx) in current.config.multiTables"
            :key="idx"
          >
            <span class="m2o">
              <o-m2o-editor
                :disabled="$srv.getx(panelItems, 'multiForm.disabled', true)"
                :value="item.value"
                @model-change="
                  e => {
                    item.value = e;
                    saveDetailToConfig();
                  }
                "
              />
            </span>

            <Icon
              class="remove"
              size="16"
              type="md-remove-circle"
              @click="
                () => {
                  current.config.multiTables.splice(idx, 1);
                  saveDetailToConfig();
                }
              "
            />
          </span>

          <div
            class="module-setting"
            v-if="
              $srv.getx(panelItems, 'formStyle.isShow', false, v => {
                if (v && !$srv.utils.has(current.config, 'formStyle')) {
                  current.config['formStyle'] = {};
                  current.config['formStyle']['percentageWidth'] = 0;
                  current.config['formStyle']['pixelWidth'] = 0;
                  current.config['formStyle']['columnNum'] = 0;
                }
              })
            "
          >
            <span class="title">
              <strong>{{ $srv.getI18nByValue('表单样式') }}</strong>
            </span>

            <span class="form-style">
              <div class="style-setting">
                <span class="title">
                  {{ $srv.getI18nByValue('百分比宽度') }}
                </span>
                <InputNumber
                  :max="100"
                  :min="0"
                  v-model="current.config.formStyle.percentageWidth"
                  :disabled="current.config.formStyle.pixelWidth > 0"
                  :formatter="value => `${value}%`"
                  :parser="value => value.replace('%', '')"
                  @on-change="saveDetailToConfig"
                />
              </div>
              <div class="style-setting">
                <span class="title">
                  {{ $srv.getI18nByValue('像素宽度') }}
                </span>
                <InputNumber
                  v-model="current.config.formStyle.pixelWidth"
                  :disabled="current.config.formStyle.percentageWidth > 0"
                  :formatter="value => `${value}px`"
                  :parser="value => value.replace('%', '')"
                  @on-change="saveDetailToConfig"
                />
              </div>
              <div class="style-setting">
                <span class="title">
                  {{ $srv.getI18nByValue('列数') }}
                </span>
                <InputNumber
                  v-model="current.config.formStyle.columnNum"
                  :disabled="current.config.formStyle.columnNum > 0"
                  @on-change="saveDetailToConfig"
                />
              </div>
            </span>
          </div>
        </div>
        <!-- 编辑窗口（编辑窗口属性暂没用到，可删除） -->
        <!-- <div class="tab-row">
          <div class="check">
            <span
              class="check-title"
              v-if="
                panelItems.editWindow ? panelItems.editWindow.isShow : false
              "
            >
              {{ $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.editwindow') }}
              :</span
            >
            <Checkbox
              size="small"
              :disabled="
                panelItems.editWindow ? panelItems.editWindow.disabled : false
              "
              v-model="current.config.editWindow"
              @on-change="saveDetailToConfig"
              v-if="
                panelItems.editWindow ? panelItems.editWindow.isShow : false
              "
            ></Checkbox>
          </div>
        </div> -->
        <!-- <div class="divider-empty-thin"></div> -->
        <div class="divider-empty"></div>
        <Divider />
      </div>

      <!-- 数据库类型配置 -->
      <div
        class="connect-module module"
        v-if="
          $srv.getx(panelItems, 'dbType.isShow', false, v => {
            if (v && !$srv.utils.has(current.config, 'dbType')) {
              current.config['dbType'] = $srv.globalVar.dbType.MYSQL;
            }
          })
        "
      >
        <div class="divider-empty-thin"></div>
        <div class="span-rows">
          <span class="title">
            {{ $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.dbType') }}:
          </span>
          <div class="content">
            <o-combobox
              v-model="current.config.dbType"
              :config="dbTypeSelConf"
              @on-select="saveDetailToConfig"
            />
          </div>
        </div>
        <div class="divider-empty-thin"></div>
        <Divider />
      </div>

      <!-- 表图切换 panelItems.editWindow ? panelItems.editWindow.isShow : false -->
      <div
        class="tab-row"
        v-if="
          $srv.getx(panelItems, 'tableGraphMode.isShow', false, v => {
            if (v && !$srv.utils.has(current.config, 'tableGraphMode')) {
              current.config['tableGraphMode'] = false;
            }
          })
        "
      >
        <div class="check">
          <span class="check-title">
            {{
              $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.tableGraphMode')
            }}
            :</span
          >
          <Checkbox
            size="small"
            :disabled="
              panelItems.tableGraphMode
                ? panelItems.tableGraphMode.disabled
                : false
            "
            v-model="current.config.tableGraphMode"
            @on-change="saveDetailToConfig"
          ></Checkbox>
        </div>
        <div class="divider-empty"></div>
        <Divider />
      </div>

      <!-- 分组配置 -->
      <div
        class="group-module module"
        v-if="
          $srv.getx(panelItems, 'group.isShow', false) &&
            ($srv.utils.get(current.config, 'formPanels', false) ||
              $srv.utils.get(current.config, 'tablePanels', false))
        "
      >
        <div class="tab-box">
          <div class="divider-empty-thin"></div>
          <span class="title">
            {{
              $srv.getI18nByPath(
                'oSetupPanel.SetupAttrDetail.groupconfiguration'
              )
            }}
          </span>
          <!-- 增加分组 -->
          <Dropdown
            v-if="$srv.getx(panelItems, 'group.defVal.addGroup.isShow', false)"
            :disabled="
              $srv.getx(panelItems, 'group.defVal.addGroup.disabled', true)
            "
            class="new-btn dropdown"
            trigger="click"
            style="margin-left: 20px"
            @on-click="newGroupSelect"
            @on-visible-change="newGroupSwitch"
          >
            <Icon type="ios-add-circle" :style="groupStyle" />
            <DropdownMenu slot="list">
              <DropdownItem
                name="form"
                v-if="
                  $srv.getx(
                    panelItems,
                    'group.defVal.addGroupHead.isShow',
                    false
                  )
                "
              >
                {{
                  $srv.getI18nByPath(
                    'oSetupPanel.SetupAttrDetail.addheadergroup'
                  )
                }}
              </DropdownItem>
              <DropdownItem
                name="table"
                v-if="
                  $srv.getx(
                    panelItems,
                    'group.defVal.addGroupBody.isShow',
                    false
                  )
                "
              >
                {{
                  $srv.getI18nByPath(
                    'oSetupPanel.SetupAttrDetail.addbodygrouping'
                  )
                }}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <div class="divider-empty-thin"></div>
          <!-- 表单布局 -->
          <div
            class="forms-layout"
            v-if="
              $srv.getx(
                panelItems,
                'group.defVal.formLayout.isShow',
                false,
                v => {
                  if (v && !$srv.utils.has(current.config, 'panelLayout')) {
                    current.config['panelLayout'] = {};
                    current.config['panelLayout']['formLayout'] = 'tabs';
                  }
                }
              )
            "
          >
            <span>{{ $srv.getI18nByValue('表单布局') }}:</span>
            <Select
              clearable
              v-model="current.config.panelLayout.formLayout"
              @on-change="saveDetailToConfig"
            >
              <Option value="tabs">
                {{
                  $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.tabsStyle')
                }}
              </Option>
              <Option value="collapse">
                {{
                  $srv.getI18nByPath(
                    'oSetupPanel.SetupAttrDetail.collapseStyle'
                  )
                }}
              </Option>
            </Select>
          </div>
          <div class="divider-empty-thin"></div>
          <!-- 表单分组 -->
          <div class="group-forms">
            <div
              class="form-detail"
              v-for="(item, idx) of formGroup"
              :key="idx"
            >
              <div
                :class="[
                  'tab-box',
                  activeGroup == 'form_' + idx ? 'active' : ''
                ]"
              >
                <div
                  class="group-title"
                  v-if="
                    $srv.getx(panelItems, 'group.defVal.form.isShow', false)
                  "
                >
                  <o-i18n-selector
                    v-model="current.config.formPanels[idx].label"
                    @on-blur="saveDetailToConfig"
                    :placeholder="
                      $srv.getI18nByPath(
                        'oSetupPanel.SetupAttrDetail.enterheadergroupname'
                      )
                    "
                  ></o-i18n-selector>
                  <icon
                    type="ios-arrow-down"
                    @click="groupChange('form_' + idx)"
                  ></icon>
                  <icon
                    type="md-close"
                    @click="groupRemove('form', idx)"
                  ></icon>
                </div>
                <div
                  v-show="
                    $srv.getx(
                      panelItems,
                      'group.defVal.formStyle.isShow',
                      false
                    )
                  "
                  class="group-cell form-style"
                  v-for="(item2, idx2) of item.details"
                  :key="idx2"
                >
                  <span class="title">{{ item2.title }}</span>
                  <div
                    class="attr-cell"
                    v-for="(item3, key) in item2.list"
                    :key="key"
                  >
                    <DetailRender
                      :name="key"
                      :value="item3"
                      :render="item2.list[key]"
                      @change="
                        v => {
                          item2.list[key] = v;
                        }
                      "
                      @saveDetailToConfig="saveDetailToConfig"
                    />
                  </div>
                  <br style="clear: both" />
                </div>
              </div>
              <div class="divider-empty-thin"></div>
            </div>
          </div>
          <!-- 表分组 -->
          <div
            class="group-tables"
            v-if="$srv.getx(panelItems, 'group.defVal.table.isShow', false)"
          >
            <div
              class="table-detail"
              v-for="(item, idx) of tableGroup"
              :key="idx"
            >
              <div
                :class="[
                  'tab-box',
                  activeGroup == 'table_' + idx ? 'active' : ''
                ]"
              >
                <div class="group-title">
                  <o-i18n-selector
                    :modelvalue="current.config.tablePanels[idx].label"
                    @model-change="
                      v => {
                        current.config.tablePanels[idx].label = v;
                        saveDetailToConfig();
                      }
                    "
                    @on-blur="onTablesNameBlur($event, idx)"
                    :placeholder="
                      $srv.getI18nByPath(
                        'oSetupPanel.SetupAttrDetail.enterbodygroupname'
                      )
                    "
                    :compBoxInfo="GT_compBoxInfo"
                  ></o-i18n-selector>
                  <!-- 展开明细 -->
                  <icon
                    type="ios-arrow-down"
                    @click="groupChange('table_' + idx)"
                  ></icon>
                  <icon
                    type="md-close"
                    @click="groupRemove('table', idx)"
                  ></icon>
                </div>
                <div
                  class="group-cell"
                  v-for="(item2, idx2) of item.details"
                  :key="idx2"
                >
                  <span class="title">{{ item2.title }}</span>
                  <div
                    class="attr-cell"
                    v-for="(item3, key) in item2.list"
                    :key="key"
                  >
                    <!-- 明细 -->
                    <DetailRender
                      :name="key"
                      :value="item3"
                      :render="item2.list[key]"
                      @change="
                        v => {
                          item2.list[key] = v;
                        }
                      "
                      @saveDetailToConfig="saveDetailToConfig"
                    ></DetailRender>
                  </div>
                  <br style="clear: both" />
                </div>
              </div>
              <div class="divider-empty-thin"></div>
            </div>
          </div>
        </div>
        <div class="divider-empty-thin"></div>
        <Divider />
      </div>

      <!-- 克隆功能 -->
      <div
        class="clone-module module"
        v-if="$srv.getx(panelItems, 'cloneComp.isShow', false)"
      >
        <div class="tab-box">
          <span class="title">
            {{
              $srv.getI18nByPath(
                'oSetupPanel.SetupAttrDetail.selectclonefunction'
              )
            }}
          </span>
          <!-- v-model="current.config.originName" -->
          <o-m2o-selector
            v-model="current.config.refTable"
            :placeholder="
              $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.functionname')
            "
            @on-dochange="cloneFunChange"
            tTable="_sys_fun"
            tField="title"
            vField="title"
          />
        </div>
        <div class="divider-empty-thin"></div>
        <div class="divider-empty"></div>
        <Divider />
      </div>
      <!-- 组件关联 -->
      <div
        class="connect-module module"
        v-if="$srv.getx(panelItems, 'compLink.isShow', false)"
      >
        <div class="tab-box">
          <div class="divider-empty-thin"></div>
          <span class="title">
            {{
              $srv.getI18nByPath(
                'oSetupPanel.SetupAttrDetail.componentassociation'
              )
            }}
          </span>
          <!-- 组件关联设置框 -->
          <Dropdown
            class="new-btn dropdown"
            trigger="click"
            @on-visible-change="newConnectSwitch"
            :visible="newConnectVisible"
            style="margin-left: 20px"
          >
            <Icon
              type="ios-add-circle"
              :style="connectStyle"
              class="comp-btn-chk"
            />
            <DropdownMenu slot="list">
              <Tabs name="connect" @on-click="newConnectTypeChange" type="card">
                <TabPane
                  tab="connect"
                  :label="
                    $srv.getI18nByPath(
                      'oSetupPanel.SetupAttrDetail.fieldcorrespondence'
                    )
                  "
                  name="search"
                >
                  <div class="search-connect">
                    <div :class="{ 'operation-warning': searchCompErr }">
                      <Select
                        :placeholder="
                          $srv.getI18nByPath(
                            'oSetupPanel.SetupAttrDetail.selectthetargetcomponent'
                          )
                        "
                        clearable
                        @on-change="changeConnectCell"
                        @on-clear="changeConnectCell"
                      >
                        <Option
                          v-for="item of cellList"
                          v-show="cellID != item"
                          :key="item"
                          :value="item"
                          >{{ item }}</Option
                        >
                      </Select>
                    </div>
                    <dir
                      class="search-select-container"
                      :class="{ 'operation-warning': searchSelContainerErr }"
                    >
                      <div class="search-select">
                        <Select
                          :placeholder="
                            $srv.getI18nByPath(
                              'oSetupPanel.SetupAttrDetail.selectownfield'
                            )
                          "
                          clearable
                          @on-open-change="getCurrentFieldList"
                          @on-change="changeConnectMyField"
                          @on-clear="changeConnectMyField"
                        >
                          <Option
                            v-for="item of currentFieldList"
                            :key="item"
                            :value="item"
                            >{{ item }}</Option
                          >
                        </Select>
                        <Select
                          :placeholder="
                            $srv.getI18nByPath(
                              'oSetupPanel.SetupAttrDetail.selecttargetfield'
                            )
                          "
                          clearable
                          @on-open-change="getTargetFieldList"
                          @on-change="changeConnectTargetField"
                          @on-clear="changeConnectTargetField"
                        >
                          <Option
                            v-for="item of targetFieldList"
                            :key="item"
                            :value="item"
                            >{{ item }}</Option
                          >
                        </Select>
                      </div>
                      <div class="cust-input">
                        <Input
                          clearable
                          :placeholder="$srv.getI18nByValue('输入自身字段')"
                          @input="changeConnectMyField"
                          @on-clear="changeConnectMyField"
                        ></Input>
                        <Input
                          clearable
                          :placeholder="$srv.getI18nByValue('输入目标字段')"
                          @input="changeConnectTargetField"
                          @on-clear="changeConnectTargetField"
                        ></Input>
                      </div>
                    </dir>
                  </div>
                </TabPane>
                <!-- 被search替代 -->
                <!-- <TabPane
                  tab="connect"
                  :label="
                    $srv.getI18nByPath(
                      'oSetupPanel.SetupAttrDetail.refreshrequest'
                    )
                  "
                  name="refresh"
                >
                  <div class="refresh-connect">
                    <Select
                      :placeholder="
                        $srv.getI18nByPath(
                          'oSetupPanel.SetupAttrDetail.selectthetargetcomponent'
                        )
                      "
                      clearable
                      @on-change="changeConnectCell"
                    >
                      <Option
                        v-for="item of cellList"
                        v-show="cellID != item"
                        :key="item"
                        :value="item"
                        >{{ item }}</Option
                      >
                    </Select>
                  </div>
                </TabPane> -->
              </Tabs>
              <div class="connect-confirm">
                <Button type="primary" size="small" @click="addConnect">
                  {{ $srv.getI18nByPath('oSetupPanel.layoutsPanel.yes') }}
                </Button>
                <Button size="small" @click="newConnectSwitch(false)">
                  {{ $srv.getI18nByPath('oSetupPanel.layoutsPanel.cancel') }}
                </Button>
              </div>
            </DropdownMenu>
          </Dropdown>
          <div class="connect-result">
            <div class="connect-result-search">
              <!-- <span>{{ current.config.messageConfig.emitActions }}</span> -->
              <div
                class="result-search"
                v-for="(item, idx) of current.config.messageConfig.emitActions
                  .search"
                :key="idx"
              >
                <div class="result-search-item">
                  <div>
                    {{
                      $srv.utils.noValue(item.sourceToID)
                        ? item.toID
                        : item.sourceToID + '[id:' + item.toID + ']'
                    }}
                  </div>
                  <div>
                    {{
                      $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.search') +
                        ':[' +
                        item.msg.content.ikey +
                        ' => ' +
                        item.msg.content.ukey +
                        ']'
                    }}
                  </div>
                </div>
                <Icon type="md-close" @click="removeSearch(idx)" />
              </div>
            </div>
            <div class="connect-result-refresh">
              <div
                class="result-refresh"
                v-for="(item, idx) of current.config.messageConfig.emitActions
                  .refresh"
                :key="idx"
              >
                <span>{{
                  $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.refresh') +
                    ' | ' +
                    item.toID
                }}</span>
                <Icon type="md-close" @click="removeRefresh(idx)" />
              </div>
            </div>
          </div>
        </div>
        <div class="divider-empty-thin"></div>
        <Divider />
      </div>

      <!-- 主功能QBE查询配置 --(改：iview组件) -->
      <!-- <div
        class="connect-module module"
        v-if="
          $srv.getx(panelItems, 'QBESearch.isShow', false, v => {
            if (v && !$srv.utils.has(current.config, 'qbeSearch')) {
              current.config['qbeSearch'] = {};
            }
          })
        "
      >
        <div class="tab-box">
          <div class="divider-empty-thin"></div>
          <span class="title">
            {{ $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.QBEsearch') }}
          </span>
          <div class="qbe-search">
            <div class="label-value">
              <span>{{ $srv.getI18nByValue('QBE查询') }}</span>
              <vxe-switch
                v-model="current.config.qbeSearch.enable"
                :disabled="current.config.status !== 'main'"
                size="default"
                open-label="启用"
                close-label="禁用"
                @change="saveDetailToConfig"
              ></vxe-switch>
            </div>
            <div class="db-label-value">
              <div class="label-value">
                <span>{{ $srv.getI18nByValue('初始显示') }}</span>
                <vxe-switch
                  v-model="current.config.qbeSearch.isInitShow"
                  :disabled="!current.config.qbeSearch.enable"
                  size="default"
                  @change="saveDetailToConfig"
                ></vxe-switch>
              </div>
              <div class="label-value">
                <span>{{ $srv.getI18nByValue('初始间距') }}</span>
                <InputNumber
                  :max="50"
                  :min="1"
                  v-model="current.config.qbeSearch.initSpace"
                  :formatter="value => `${value}%`"
                  :parser="value => value.replace('%', '')"
                />
              </div>
            </div>
            <div class="label-value">
              <span>{{ $srv.getI18nByValue('位置') }}</span>
              <vxe-radio-group
                v-model="current.config.qbeSearch.position"
                :disabled="!current.config.qbeSearch.enable"
                @change="saveDetailToConfig"
              >
                <vxe-radio label="top" content="上"></vxe-radio>
                <vxe-radio label="bottom" content="下"></vxe-radio>
                <vxe-radio label="left" content="左"></vxe-radio>
                <vxe-radio label="right" content="右"></vxe-radio>
              </vxe-radio-group>
            </div>
          </div>
        </div>
        <div class="divider-empty-thin"></div>
        <Divider />
      </div> -->
      <!-- 条码扫描配置（现在仅限于basegrid使用） --(改：iview组件) -->
      <!-- <div
        class="connect-module module"
        v-if="
          $srv.getx(panelItems, 'bancodeScan.isShow', false, v => {
            if (v && !$srv.utils.has(current.config, 'bancodeScan')) {
              current.config['bancodeScan'] = {};
            }
          })
        "
      >
        <div class="tab-box">
          <div class="divider-empty-thin"></div>
          <span class="title">
            {{ $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.bancodeScan') }}
          </span>
          <div class="qbe-search">
            <div class="db-label-value">
              <div class="label-value">
                <span>{{ $srv.getI18nByValue('开启') }}</span>
                <vxe-switch
                  v-model="current.config.bancodeScan.enable"
                  size="default"
                  :open-label="$srv.getI18nByValue('启用')"
                  :close-label="$srv.getI18nByValue('禁用')"
                  @change="saveDetailToConfig"
                ></vxe-switch>
              </div>
              <div class="label-value">
                <span>{{ $srv.getI18nByValue('初始间距') }}</span>
                <InputNumber
                  :max="50"
                  :min="1"
                  v-model="current.config.bancodeScan.initSpace"
                  :formatter="value => `${value}%`"
                  :parser="value => value.replace('%', '')"
                />
              </div>
            </div>
            <div class="label-value">
              <span>{{ $srv.getI18nByValue('位置') }}</span>
              <vxe-radio-group
                v-model="current.config.bancodeScan.position"
                :disabled="!current.config.bancodeScan.enable"
                @change="saveDetailToConfig"
              >
                <vxe-radio label="top" content="上"></vxe-radio>
                <vxe-radio label="bottom" content="下"></vxe-radio>
                <vxe-radio label="left" content="左"></vxe-radio>
                <vxe-radio label="right" content="右"></vxe-radio>
              </vxe-radio-group>
            </div>

            <div class="label-value">
              <span>{{ $srv.getI18nByValue('结束符') }}</span>
              <Input
                :placeholder="$srv.getI18nByValue('Default Enter...')"
                clearable
                v-model="current.config.bancodeScan.terminator"
                :disabled="!current.config.bancodeScan.enable"
                @on-change="saveDetailToConfig"
              />
            </div>
            <div class="label-value">
              <span>{{ $srv.getI18nByValue('公共API') }}</span>
              <o-m2o-selector
                v-model="current.config.bancodeScan.apiName"
                :placeholder="
                  $srv.getI18nByPath(
                    'piece.oQueryLinkSetting.commoneventlibrary'
                  )
                "
                @on-dochange="saveDetailToConfig"
                :tTable="$srv.globalVar.tableName.PUB_API"
                :tField="$srv.globalVar.fieldName.pubApiName"
                :vField="$srv.globalVar.fieldName.pubApiName"
                :dropdown="true"
              ></o-m2o-selector>
            </div>
          </div>
        </div>
        <div class="divider-empty-thin"></div>
        <Divider />
      </div> -->

      <div class="collapse-container" key="hihi">
        <Collapse simple v-model="panelID">
          <!-- 主功能QBE查询配置 -->
          <Panel
            name="qbeSearch"
            v-if="
              $srv.getx(panelItems, 'QBESearch.isShow', false, v => {
                if (v && !$srv.utils.has(current.config, 'qbeSearch')) {
                  current.config['qbeSearch'] = {};
                }
              })
            "
          >
            {{ $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.QBEsearch') }}
            <div slot="content">
              <qbe-search-setting
                v-model="current.config.qbeSearch"
                :isMain="current.config.status === 'main'"
                @change="saveDetailToConfig"
              ></qbe-search-setting>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>

          <!-- 条码扫描配置  (改：iview组件) -->
          <Panel
            name="bancodeScan"
            v-if="
              $srv.getx(panelItems, 'bancodeScan.isShow', false, v => {
                if (v && !$srv.utils.has(current.config, 'bancodeScan')) {
                  current.config['bancodeScan'] = {};
                }
              })
            "
          >
            {{ $srv.getI18nByPath('oSetupPanel.SetupAttrDetail.bancodeScan') }}
            <div slot="content">
              <bancode-scan-setting
                v-model="current.config.bancodeScan"
                @change="saveDetailToConfig"
              ></bancode-scan-setting>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>

          <!-- 详细配置 —— 表格样式/表单样式/工具栏/表格数据处理/ -->
          <Panel
            :name="item.key"
            v-for="(item, idx) of details"
            :key="idx"
            v-show="item.control.isShow"
          >
            {{ item.title }}
            <div slot="content" class="details-module module">
              <div class="tab-box">
                <div class="divider-empty-thin"></div>
                <div
                  class="attr-cell"
                  v-for="(item2, key) in item.list"
                  :key="key"
                >
                  <DetailRender
                    :name="key"
                    :value="item2"
                    :render="item.list[key]"
                    v-if="
                      $srv.utils.noValue(item.toolbarConf)
                        ? true
                        : getToolbarConf(item.toolbarConf, key).isShow
                    "
                    :isDisabled="
                      $srv.utils.noValue(item.toolbarConf)
                        ? false
                        : getToolbarConf(item.toolbarConf, key).disabled
                    "
                    @change="toolbarChange($event, key, item)"
                    @saveDetailToConfig="saveDetailToConfig"
                  ></DetailRender>
                </div>
                <br style="clear: both" />
              </div>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>

          <!-- 自定义按钮 -->
          <Panel
            name="custBtn"
            v-if="
              $srv.getx(panelItems.customButton, 'isShow', false) &&
                $srv.utils.get(current.config, 'toolbar.addon', false)
            "
          >
            {{ $srv.getI18nByPath('piece.oQueryLinkSettingc.custombutton') }}
            <div slot="content">
              <o-custom-btn-setting
                v-model="current.config.toolbar.addon"
                @change="saveDetailToConfig"
              ></o-custom-btn-setting>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>

          <!-- 联查配置 -->
          <Panel
            name="queryLinkConf"
            v-if="
              panelItems.queryLink
                ? panelItems.queryLink.isShow
                : false && current.config.queryLink
            "
          >
            {{
              $srv.getI18nByPath(
                'piece.oQueryLinkSettingq.jointinvestigationsettings'
              )
            }}
            <div slot="content">
              <o-query-link-setting
                v-model="current.config.queryLink"
                @change="saveDetailToConfig"
              ></o-query-link-setting>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>
          <!-- <Panel name="4">
            <div slot="content">
              <o-chart-setting
                v-model="current.config.charts"
                @change="saveDetailToConfig"
                :isMes="true"
              ></o-chart-setting>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel> -->
          <!-- </Panel> -->

          <!-- 选单 -->
          <Panel
            name="menuConf"
            v-if="
              $srv.utils.get(panelItems, 'selbill.isShow', false) &&
                $srv.utils.get(current, 'config.selbill', false)
            "
          >
            {{
              $srv.getI18nByPath('piece.oQueryLinkSettings.menuconfiguration')
            }}
            <div slot="content">
              <o-select-bill-setting
                v-model="current.config.selbill"
                @change="saveDetailToConfig"
              ></o-select-bill-setting>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>

          <!-- 事件 -->
          <Panel
            name="event"
            v-if="
              $srv.getx(panelItems.action, 'isShow', false, v => {
                if (v && !$srv.utils.has(current.config, 'action')) {
                  current.config['action'] = {};
                }
              })
            "
          >
            {{ $srv.getI18nByPath('piece.oQueryLinkSetting.event') }}
            <div slot="content">
              <o-action-list-setting
                v-model="current.config.action"
                :actionsConf="current.config.toolbar"
                :addonActions="addonActionsList"
                @change="saveDetailToConfig"
              ></o-action-list-setting>
              <!-- <div class="divider-empty-thin"></div> -->
              <!-- <Divider /> -->
              <div
                :class="[
                  'table-group',
                  activeTableGroup === idx ? 'active' : ''
                ]"
                v-for="(item, idx) of tableGroup"
                :key="idx"
              >
                <div class="table-title" @click="tableGroupSwitch(idx)">
                  <span class="title">{{ $srv.getI18nBySrv(item.label) }}</span>
                  <icon type="ios-arrow-down"></icon>
                </div>
                <div class="table-content">
                  <o-action-list-setting
                    v-model="current.config.tablePanels[idx].content.action"
                    :actionsConf="current.config.toolbar"
                    @change="saveDetailToConfig"
                  ></o-action-list-setting>
                </div>
              </div>
              <!--  -->
            </div>
          </Panel>

          <!-- 行双击触发事件 -->
          <Panel
            name="dbClickEvent"
            v-if="
              $srv.getx(panelItems, 'rowDbClickSetting.isShow', false, v => {
                if (v && !$srv.utils.has(current.config, 'triggerEvent')) {
                  current.config['triggerEvent'] = {};
                }
              })
            "
          >
            {{
              $srv.getI18nByPath('piece.oQueryLinkSettingt.rowDbClickSetting')
            }}
            <div slot="content">
              <!-- panelModalEdit.enabled ? panelModalEdit.enabled.isShow : false -->
              <div
                class="check fit-rows"
                v-if="
                  $srv.getx(
                    panelItems,
                    'rowDbClickSetting.defVal.enabled.isShow'
                  )
                "
              >
                <span>
                  {{ $srv.getI18nByPath('piece.oQueryLinkSettingt.enable') }}
                </span>
                <!-- @input="val => (current.config.triggerEvent['rowDbClick'] = val)" -->
                <div class="fit-rows-content">
                  <Checkbox
                    size="small"
                    :value="
                      $srv.utils.noValue(current.config.triggerEvent)
                        ? false
                        : $srv.utils.noValue(
                            current.config.triggerEvent.rowDbClick
                          )
                        ? false
                        : current.config.triggerEvent.rowDbClick
                    "
                    @input="setEnabledValue"
                    :disabled="
                      panelItems.rowDbClickSetting.defVal.enabled.disabled
                    "
                    @on-change="saveDetailToConfig"
                  ></Checkbox>
                  <Tooltip
                    placement="top"
                    :content="
                      $srv.getI18nByPath('piece.oQueryLinkSettingt.enableHelp')
                    "
                    :delay="500"
                  >
                    <Icon type="ios-help" class="help" />
                  </Tooltip>
                </div>
              </div>
              <div
                class="check fit-rows"
                v-if="
                  $srv.getx(
                    panelItems,
                    'rowDbClickSetting.defVal.styleEdit.isShow'
                  )
                "
              >
                <span>{{ $srv.getI18nByValue('样式编辑') }}</span>
                <!-- 同样要做拆分—— v-modal -->
                <!-- @on-blur="saveDetailToConfig" -->
                <Input
                  class="fit-rows-content"
                  :placeholder="$srv.getI18nByValue('请输入列数')"
                  :disabled="
                    panelItems.rowDbClickSetting.defVal.styleEdit.disabled
                  "
                />
              </div>
              <!-- 详细设置（保留——可对弹窗编辑的样式等进行配置） -->
              <div
                class="check fields-group"
                v-if="
                  $srv.getx(
                    panelItems,
                    'rowDbClickSetting.defVal.groupByField.isShow',
                    false,
                    v => {
                      if (
                        v &&
                        !$srv.utils.has(
                          current.config.triggerEvent,
                          'groupByField'
                        )
                      ) {
                        current.config.triggerEvent['groupByField'] = [];
                      }
                    }
                  )
                "
              >
                <span>{{ $srv.getI18nByValue('字段分组') }}</span>
                <div class="field-group-item">
                  <!-- :restFields="currentRestFields" -->
                  <o-field-groupby-setting
                    v-model="current.config.triggerEvent.groupByField"
                    @on-open-change="getCurrentAllFields"
                    @change="saveDetailToConfig"
                    :sourceFields="currentAllFields"
                  ></o-field-groupby-setting>
                </div>
              </div>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>

          <!-- 日期导航配置 name="dateNavConfig" -->
          <Panel
            name="dateNavConfig"
            v-if="
              $srv.getx(panelItems, 'dateNav.isShow', false, v => {
                if (v && !current.config.hasOwnProperty('statisticsFields')) {
                  $set(current.config, 'statisticsFields', []);
                }
              })
            "
          >
            {{ $srv.getI18nByValue('日期组件配置项') }}
            <div slot="content">
              <div
                class="check"
                style="
                  margin-left: 10px;
                  margin-bottom: 10px;
                  display: flex;
                  justify-content: space-around;
                "
                v-if="
                  $srv.getx(current.config, 'dateType', '日', v => {
                    $set(current.config, 'dateType', v);
                  })
                "
              >
                <span>
                  {{ $srv.getI18nByValue('默认模式') }}
                  :
                </span>
                <Select
                  v-model="current.config.dateType"
                  @on-change="saveDetailToConfig"
                  class="select-inset-method"
                >
                  <Option value="day">
                    {{ $srv.getI18nByValue('日') }}
                  </Option>
                  <Option value="week">
                    {{ $srv.getI18nByValue('周') }}
                  </Option>
                  <Option value="month">
                    {{ $srv.getI18nByValue('月') }}
                  </Option>
                </Select>
              </div>

              <div class="divider-empty-thin"></div>
              <!-- 添加日期过滤条件 -->
              <div class="check">
                <o-conditions-setting
                  v-model="current.config.statisticsFields"
                  @change="saveDetailToConfig"
                >
                </o-conditions-setting>
              </div>

              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>

          <!-- 报表图表配置 name="reportChart"-->
          <Panel
            name="reportChart"
            v-if="$srv.getx(panelItems, 'reportChart.isShow', false, v => {})"
          >
            {{ $srv.getI18nByValue('报表图表组件配置项') }}
            <div slot="content">
              <div
                class="check fit-rows"
                v-if="
                  $srv.getx(
                    panelItems,
                    'reportChart.defVal.reportChartCode.isShow',
                    false,
                    v => {
                      if (
                        v &&
                        !$srv.utils.has(current.config, 'reportChartCode')
                      ) {
                        current.config.reportChartCode = {};
                      }
                    }
                  )
                "
              >
                <span>
                  {{ $srv.getI18nByValue('报表图表编码') }}
                  :
                </span>
                <o-m2o-selector
                  class="fit-rows-content"
                  style="flex: 3"
                  v-model="current.config.reportChartCode"
                  :placeholder="$srv.getI18nByValue('报表图表编码')"
                  :disabled="
                    panelItems.reportChart.defVal.reportChartCode.disabled
                  "
                  @on-dochange="saveDetailToConfig"
                  :tTable="$srv.globalVar.tableName.SYS_PRINTSET"
                  tField="id"
                  vField="title"
                  :dropdown="false"
                ></o-m2o-selector>
              </div>
              <div class="divider-empty-thin"></div>
              <div
                class="check fit-rows"
                v-if="
                  $srv.getx(
                    panelItems,
                    'reportChart.defVal.chartMode.isShow',
                    false,
                    v => {
                      if (v && !$srv.utils.has(current.config, 'chartMode')) {
                        current.config.chartMode = 'jmreport';
                      }
                    }
                  )
                "
              >
                <span>
                  {{ $srv.getI18nByValue('图表模式') }}
                </span>
                <Select
                  style="flex: 3"
                  v-model="current.config.chartMode"
                  @on-change="saveDetailToConfig"
                >
                  <Option value="jmreport">
                    {{ $srv.getI18nByValue('报表模式') }}
                  </Option>
                  <Option value="jimubi">
                    {{ $srv.getI18nByValue('积木BI模式') }}
                  </Option>
                </Select>
              </div>
              <div class="divider-empty-thin"></div>
              <Divider />
            </div>
          </Panel>
        </Collapse>
        <Divider />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import oActionListSetting from '@/components/piece/o-action-list-setting.vue';
import oChartSetting from '@/components/piece/o-chart-setting.vue';
import oConditionsSetting from '@/components/piece/o-conditions-setting.vue';
import oCustomBtnSetting from '@/components/piece/o-custom-btn-setting.vue';
import oFieldGroupbySetting from '@/components/piece/o-field-groupby-setting.vue';
import oMesSetting from '@/components/piece/o-mes-setting.vue';
import oQueryLinkSetting from '@/components/piece/o-query-link-setting.vue';
import oSelectBillSetting from '@/components/piece/o-select-bill-setting.vue';
import Option from 'view-design/src/components/select/option.vue';
import DetailRender from './attrDetailRender.vue';
import {
  auditDefaultFields,
  conf,
  I_command,
  ifs,
  recordsDefaultFields,
  T_srv,
  Tsrv,
  vue
} from './config';
import bancodeScanSetting from './settingItems/bancode-scan-setting.vue';
import qbeSearchSetting from './settingItems/qbe-search-setting.vue';
import { N_oSetupPanel } from './types';

@T_srv.comp({
  components: {
    DetailRender,
    oQueryLinkSetting,
    oCustomBtnSetting,
    oSelectBillSetting,
    oActionListSetting,
    oFieldGroupbySetting,
    oChartSetting,
    oMesSetting,
    oConditionsSetting,
    qbeSearchSetting,
    bancodeScanSetting,
    Option
  }
})
export default class SetupAttrDetail extends vue {
  @T_srv.prop() isChange!: boolean;

  // 是否配置改变
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'SetupAttrDetail';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private current: any = null;

  // 当前配置
  private cellID: string | undefined = '';

  // 单元格id
  private cellList: string[] = []; // cellID列表

  // 是否开启某些组件
  private panelItems: any = {};

  // 组件明细的工具栏配置
  private panelToolbar: any = {};

  // 组件明细的工具栏配置
  // private panelModalEdit: any = {};

  private details: any = [];

  // private details: any = []; // 详细属性组件
  /* 分组配置 */

  private formGroup: any = [];

  private tableGroup: any = [];

  private groupStyle = {};

  // 新建分组按钮的样式动画
  private activeGroup = ''; // 当前激活的分组

  /* 组件关联 */
  private newConnectType = 'search';

  // search或者refresh
  private currentFieldList: string[] = [];

  // 自身字段列表
  private targetFieldList: string[] = []; // 对方字段列表

  private selectedCompID = '';

  // 选择的对方cellID
  private selectedCurrentField = '';

  // 选择的自身字段
  private selectedTargetField = '';

  // 选择的对方字段
  private connectStyle = {};

  // 新建关联按钮的样式动画
  private newConnectVisible = false;

  private GT_command: I_command = null;

  // 下拉菜单是否显示
  // 默认打开折叠
  private panelID: string | Array<string> = [
    // 'system.compoKey.toolbar',
    // 'system.compoKey.tableStyle',
    // 'dbClickEvent'
  ];

  // 数据库类型选择配置
  private dbTypeSelConf = conf;

  // 选择组件错误
  private searchCompErr: boolean = false;

  private searchSelContainerErr: boolean = false;

  private currentAllFields: any[] = [];

  private activeTableGroup: number | undefined = 0;

  // 当功能是单据时,记录已有的表体
  private panelTabelName: Array<string> = [];

  private addonActionsList: object;

  /**
   * 获取当前组件的类
   */
  get currentCompClass() {
    return this.GT_command.Tsetup.getCompClass(
      this.GT_command.Tsetup?.component?.current?.name
    );
  }

  @T_srv.watch('isChange')
  private componentChanged(val: boolean = true) {
    // 补充老版本兼容
    if (this.GT_command.Tsetup.component.current?.config?.toolbar) {
      const curr = this.GT_command.Tsetup.component.current?.config?.toolbar;
      if (Tsrv.utils.noValue(curr['addon'])) {
        curr['addon'] = [];
      }
    }
    this.current = this.GT_command.Tsetup.component.current;

    this.cellID = this.GT_command.Tsetup.cell.id;
    this.cellList = this.GT_command.Tsetup.cell.list;
    this.releaseFromConfig();
    this.init();
  }

  created() {
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oSetupPanelCMD'
    );
  }

  mounted() {
    this.componentChanged();
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);

    this.GT_command = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oSetupPanelCMD'
    );
    // for (let index = 0; index < this.currentCompClass.conf.length; index++) {
    //   const element = array[index];
    // }
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null;
  }

  /**
   * 增加选单配置
   */
  // private addSelBill() {
  //   if (this.current.config.selbill) {
  //     this.current.config.selbill.push({
  //       id: "",
  //       action: "",
  //       many2one: {}
  //     });
  //   }
  //   this.saveDetailToConfig();
  // }

  // /**
  //  * 移除选单配置
  //  */
  // private removeSelBill(index: number) {
  //   this.current.config.selbill.splice(index, 1);
  //   this.saveDetailToConfig();
  // }

  private init() {
    this.getPanelTableName();
    this.addonActionsList = this.getAddonActions();
  }

  private loadFunConfig(field) {
    return new Promise(resolve => {
      this.$store
        .dispatch('getLayoutConfigAsync', {
          funid: null,
          field,
          type: 'component'
        })
        .then(res => {
          if (res) {
            const config = Tsrv.utils.clone(res.current, true);
            resolve(config);
          } else {
            resolve(false);
          }
        });
    });
    // return Tsrv.getFunConf(field);
  }

  /**
   * 克隆哦功能搜索
   */
  private cloneFunChange(val: any) {
    if (val !== null) {
      const cfg = Tsrv.utils.clone<any>(this.current.config, true);
      this.loadFunConfig(val['title']).then(res => {
        if (
          !Tsrv.noValue(res['name']) &&
          res['name'].toLowerCase() !== 'basepanel'
        ) {
          this.$msg(Tsrv.getI18nByValue('选择功能不是单据类型！'));
          return;
        }
        const json = Tsrv.utils.clone<any>(res, true);
        // this.current.name = json.name;
        this.current.config = json.config;
        this.current.config.refTable = val['title'];
        this.current.config.name = !Tsrv.noValue(cfg.name) ? cfg.name : '';
        this.current.config.comment = !Tsrv.noValue(cfg.comment)
          ? cfg.comment
          : '';
        // this.current.config.status = '';
        this.current.config.messageConfig = {
          custDefListener: {
            search: [],
            coordination: null
          },
          emitActions: {
            search: [],
            refresh: []
          },
          eventGroup: null
        };
        this.current.config.tablePanels.forEach(table => {
          table.content.refTable = table.label;
          table.label = '';
          table.content.name = table.label;
        });
        // 二次处理
        delete this.current.config.permission;
        delete this.current.config.funI18nFields;
        this.saveDetailToConfig(true);
      });
    } else {
      let empty = Tsrv.utils.find(
        this.GT_command.Tsetup.component.list,
        el => el.name.toLowerCase() === 'custom'
      );
      if (empty) {
        empty = Tsrv.utils.clone(empty);
        this.current.name = 'custom';
        this.current.config = empty.config;
        this.saveDetailToConfig(true);
      }
    }
  }

  private getToolbarConf(all: any, itemKey: any): boolean {
    if (itemKey === 'addon') {
      return true;
    }
    let result: any = null;
    if (!Tsrv.utils.noValue(all) && !Tsrv.utils.noValue(itemKey)) {
      Object.keys(all).forEach(key => {
        if (key === itemKey) {
          result = all[key];
        }
      });
    }
    return result;
  }

  // 加载配置
  private releaseFromConfig() {
    if (this.current === null) {
      return;
    }

    // 初始化
    this.panelItems = [];
    this.panelToolbar = {};
    // this.panelModalEdit = {};
    this.details = [];
    this.formGroup = [];
    this.tableGroup = [];

    this.panelItems = this.currentCompClass.GetCompPanelConf().attrDetail;
    this.panelToolbar = this.currentCompClass.GetCompPanelConf().attrDetailToolbar;
    // if (this.current.config.formStyle && this.panelItems.formStyle)
    //   this.details.push({
    //     key: 'system.compoKey.formStyle',
    //     title: Tsrv.getI18nByPath('system.compoKey.formStyle'),
    //     list: this.current.config.formStyle,
    //     control: this.panelItems.formStyle
    //   });
    if (this.current.config.tableStyle && this.panelItems.tableStyle) {
      this.details.push({
        key: 'system.compoKey.tableStyle',
        title: Tsrv.getI18nByPath('system.compoKey.tableStyle'),
        list: this.current.config.tableStyle,
        control: this.panelItems.tableStyle
      });
    }
    if (this.current.config.toolbar && this.panelItems.toolbar) {
      this.details.push({
        key: 'system.compoKey.toolbar',
        title: Tsrv.getI18nByPath('system.compoKey.toolbar'),

        list: this.handleToolbar(
          this.panelToolbar,
          this.current.config.toolbar
        ),
        control: this.panelItems.toolbar,
        toolbarConf: this.panelToolbar
      });
    }
    if (
      this.current.config.tableDataSetting &&
      Tsrv.getx(this.panelItems, 'tableDataSetting.isShow', false)
    ) {
      if (
        !Object.prototype.hasOwnProperty.call(
          this.current.config,
          'tableDataSetting'
        )
      ) {
        this.current.config['tableDataSetting'] = {
          editable: true,
          autoload: true
        };
      }
      this.details.push({
        key: 'system.compoKey.tableDataSetting',
        title: Tsrv.getI18nByPath('system.compoKey.tableDataSetting'),
        list: this.current.config.tableDataSetting,
        control: this.panelItems.tableDataSetting
      });
    }
    this.dbTypeSelConf.disabled = Tsrv.utils.get(
      this.panelItems,
      'dbType.disabled',
      true
    );
    // this.dbTypeSelConf.list.find(el => el.data.value)

    // basepanel部分的设置
    if (
      this.current.name.toLowerCase() === 'basepanel' ||
      this.current.name.toLowerCase() === 'clonebasepanel'
    ) {
      this.activeGroup = 'form_0';
      // 初始化时，分组配置后中初始化一个表头、一个表体
      if (Tsrv.getx(this.current.config, 'formPanels', false))
        this.current.config.formPanels.forEach((el: any) => {
          el.content['dbType'] = this.current.config.dbType;
          el.content['name'] = this.current.config.name;
          el.content['mainFun'] = this.current.config.mainFun;
          this.formGroup.push({
            label: el.label,
            details: [
              {
                key: 'system.compoKey.formStyle',
                title: Tsrv.getI18nByPath('system.compoKey.formStyle'),
                list: el.content.formStyle
              }
            ]
          });
        });
      if (Tsrv.getx(this.current.config, 'tablePanels', false))
        this.current.config.tablePanels.forEach((el: any) => {
          el.content.name = el.label;
          el.content['dbType'] = this.current.config?.dbType;
          this.tableGroup.push({
            label: el.label,
            details: [
              {
                title: Tsrv.getI18nByPath('system.compoKey.tableStyle'),
                list: el.content.tableStyle
              },
              {
                title: Tsrv.getI18nByPath('system.compoKey.tableDataSetting'),
                list: el.content.tableDataSetting
              }
            ]
          });
        });
    }
    // cbaseForm  部分的设置
    if (this.current.name.toLowerCase() === 'cbaseform') {
      this.activeGroup = 'form_0';
      // 初始化时，分组配置后中初始化一个表头、一个表体
      this.current.config.formPanels.forEach((el: any) => {
        el.content['dbType'] = this.current.config.dbType;
        el.content['name'] = this.current.config.name;
        el.content['mainFun'] = this.current.config.mainFun;

        this.formGroup.push({
          label: el.label,
          details: [
            {
              key: 'system.compoKey.formStyle',
              title: Tsrv.getI18nByPath('system.compoKey.formStyle'),
              list: el.content.formStyle
            }
          ]
        });
      });
    }
  }

  // 处理 toolbar按钮 （多退少补）

  private handleToolbar(toolbarConf, toolbar) {
    Object.keys(toolbar).forEach(item1 => {
      if (!Tsrv.utils.has(toolbarConf, item1) && item1 !== 'addon') {
        delete toolbar[item1];
      }
    });

    Object.keys(toolbarConf).forEach(item2 => {
      if (!Tsrv.utils.has(toolbar, item2)) {
        toolbar[item2] = toolbarConf[item2].defVal;
      } else {
        Tsrv.noValue(toolbar[item2]) &&
          (toolbar[item2] = toolbarConf[item2].defVal);
      }
    });
    return toolbar;
  }

  /**
   * 保存配置
   */
  private saveDetailToConfig(update: boolean = false) {
    this.$emit('save-changes', update);
  }

  /**
   * 新建组件关联
   */
  private newConnectSwitch(val: boolean) {
    this.newConnectVisible = val;
    const rotate = !val ? 'rotate(0deg)' : 'rotate(45deg)';
    this.connectStyle = {
      transform: rotate
    };
  }

  /**
   * 切换组件关联类型
   */
  private newConnectTypeChange(name: string) {
    this.newConnectType = name;
  }

  /**
   * 改变选中目标ID
   */
  private changeConnectCell(val: string) {
    this.selectedCompID = '';
    if (val) {
      this.selectedCompID = val;
    }
  }

  /**
   * 改变当前字段
   */
  private changeConnectMyField(val: string) {
    this.selectedCurrentField = '';
    if (val) {
      this.selectedCurrentField = val;
    }
  }

  /**
   * 改变目标字段
   */
  private changeConnectTargetField(val: string) {
    this.selectedTargetField = '';
    if (val) {
      this.selectedTargetField = val;
    }
  }

  // 获取当前组件字段
  private getCurrentFieldList() {
    this.currentFieldList = [];
    if (this.current.config.tableColumns !== undefined) {
      this.currentFieldList = ['id'];
      this.current.config.tableColumns.forEach((el: any) => {
        this.currentFieldList.push(el.field);
      });
    }
    if (this.current.config.tableDataSource !== undefined) {
      this.current.config.tableDataSource.main.fields.forEach((el: any) => {
        this.currentFieldList.push(el.field);
      });
    }
  }

  /**
   * 获取目标组件字段
   */
  private getTargetFieldList() {
    this.targetFieldList = [];
    if (this.selectedCompID !== '') {
      this.targetFieldList.push('id');
      const config = this.GT_command.Tsetup.configStore.all[this.selectedCompID]
        .config;
      if (config.tableColumns !== undefined) {
        config.tableColumns.forEach((el: any) => {
          this.targetFieldList.push(el.field);
        });
      }
    }
  }

  /**
   * 添加关联
   */
  private addConnect() {
    if (this.newConnectType === 'search') {
      if (this.selectedCompID === '') {
        this.searchCompErr = true;
        setTimeout(() => {
          this.searchCompErr = false;
        }, 2000);
        this.$msg(Tsrv.getI18nByValue('请选择目标组件'));
        return;
      }
      if (this.selectedCurrentField === '' || this.selectedTargetField === '') {
        this.searchSelContainerErr = true;
        setTimeout(() => {
          this.searchSelContainerErr = false;
        }, 2000);
        this.$msg(Tsrv.getI18nByValue('请选择或者输入字段'));
        return;
      }
      this.addMessageSearch();
    } else {
      this.addMessageRefresh();
    }
    this.newConnectSwitch(false);
    this.saveDetailToConfig();
  }

  // // bus总线id替换
  // private addRegCustEventName(
  //   emitActions: any,
  //   s: 'send' | 'receive',
  //   source: string
  // ) {
  //   // 取消原功能名监听的方式，产生唯一ID号 并记录，在保存时建立devListenerName
  //   const toID = Tsrv.utils.custUUID(16);
  //   let custE: N_oBaseGrid.I_regCustEventName = {};
  //   if (s === 'send') {
  //     custE = {
  //       send: {
  //         source,
  //         target: toID
  //       }
  //     };
  //   } else {
  //     custE = {
  //       receive: {
  //         source,
  //         target: toID
  //       }
  //     };
  //   }

  //   if (emitActions?.regCustEventName) {
  //     emitActions.regCustEventName = [custE];
  //   }
  //   const idx: number = emitActions.regCustEventName.indexOf(
  //     el => el[s] && el[s].source === source
  //   );

  //   if (idx === -1) {
  //     emitActions.regCustEventName.push(custE);
  //   } else {
  //     emitActions.regCustEventName[idx] = custE;
  //   }
  // }

  // private removeCustEventName(
  //   emitActions: any,
  //   s: 'send' | 'receive',
  //   source: string
  // ) {
  //   if (!emitActions?.regCustEventName) {
  //     return;
  //   }
  //   const idx: number = emitActions.regCustEventName.indexOf(
  //     el => el[s] && el[s].source === source
  //   );
  //   if (idx > -1) {
  //     emitActions.regCustEventName.splice(idx, 1);
  //   }
  // }

  /**
   * 增加组件关联（搜索）
   */
  private addMessageSearch() {
    if (this.current.config.messageConfig !== undefined) {
      const emitActions = this.current.config.messageConfig.emitActions;
      if (!emitActions['search']) {
        emitActions['search'] = [];
      }
      // bus总线id替换
      // this.addRegCustEventName(emitActions, 'send', this.selectedCompID);
      emitActions.search.push({
        toID: this.selectedCompID,
        msg: {
          type: 'search',
          content: {
            ikey: this.selectedCurrentField,
            ukey: this.selectedTargetField,
            val: ''
          }
        }
      });
    }
  }

  /**
   * 增加組建关联（刷新）
   */
  private addMessageRefresh() {
    if (this.current.config.messageConfig !== undefined) {
      const emitActions = this.current.config.messageConfig.emitActions;
      if (!emitActions['refresh']) {
        emitActions['refresh'] = [];
      }
      // bus总线id替换
      // this.addRegCustEventName(emitActions, 'send', this.selectedCompID);
      emitActions.refresh.push({
        toID: this.selectedCompID,
        msg: {
          type: 'refresh'
        }
      });
    }
  }

  /**
   * 移除组件关联（搜索）
   */
  private removeSearch(index: number) {
    const toID = this.current.config.messageConfig.emitActions.search[index]
      .toID;
    // this.removeCustEventName(
    //   this.current.config.messageConfig.emitActions,
    //   'send',
    //   toID
    // );
    this.current.config.messageConfig.emitActions.search.splice(index, 1);
    this.saveDetailToConfig();
  }

  /**
   * 移除组件关联（刷新）
   */
  private removeRefresh(index: number) {
    const toID = this.current.config.messageConfig.emitActions.refresh[index]
      .toID;
    // this.removeCustEventName(
    //   this.current.config.messageConfig.emitActions,
    //   'send',
    //   toID
    // );
    this.current.config.messageConfig.emitActions.refresh.splice(index, 1);
    this.saveDetailToConfig();
  }

  /**
   * 新建分组按钮动画
   */
  private newGroupSwitch(val: boolean) {
    const rotate = !val ? 'rotate(0deg)' : 'rotate(45deg)';
    this.groupStyle = {
      transform: rotate
    };
  }

  /**
   * 新建分组
   */
  private newGroupSelect(val: string) {
    if (val === 'form') {
      // 标注：可以在配置中把formPanels写成一个类，在这里new一个formPanels
      // const formTemp = Tsrv.utils.clone(
      //   this.GT_command.Tsetup.component.current.config.formPanels[0],
      //   true
      // );
      const formTemp = {
        content: {
          dbType: 'mysql',
          formColumns: [],
          formStyle: {
            // columnNum: 4,
            isBottom: false
          },
          indexes: [],
          mainFun: undefined,
          name: '',
          rules: [],
          uniqueIndexes: []
        },
        label: ''
      };
      this.current.config.formPanels.push(formTemp);
      this.formGroup.push({
        label: formTemp.label,
        details: [
          {
            title: Tsrv.getI18nByPath('system.compoKey.formStyle'),
            list: formTemp.content.formStyle
          }
        ]
      });
      this.saveDetailToConfig();
    } else if (val === 'table') {
      // 标注：可以在配置中把tablePanel写成一个类，在这里new一个tablePanel
      // const tableTemp = Tsrv.utils.clone(
      //   this.GT_command.Tsetup.component.current.config.tablePanels[0],
      //   true
      // );
      const tableTemp = {
        label: '',
        content: {
          name: '',
          dbType: '',
          tableStyle: {
            showHeader: true,
            showFooter: true,
            showToolbar: true,
            border: true,
            mode: N_oSetupPanel.N_comps.TABLESTYLE_MODE.MODE_NULL
          },
          // tableColumns: [],
          tableColumns: [...auditDefaultFields(), ...recordsDefaultFields()],
          uniqueIndexes: [],
          indexes: [],
          rules: [],
          action: {},
          headerGroup: [],
          charts: [],
          toolbar: {
            // 待做配置
            default: true,
            insert: true,
            delete: true,
            save: false,
            import: true,
            export: true,
            globalSearch: true,
            edit: true,
            print: true,
            refresh: false,
            addon: []
          },
          tableDataSetting: {
            editable: true,
            autoload: true
          }
        }
      };
      this.current.config.tablePanels.push(tableTemp);

      this.tableGroup.push({
        label: tableTemp.label,
        // details: [
        details: [
          {
            title: Tsrv.getI18nByPath('system.compoKey.tableStyle'),
            list: tableTemp.content.tableStyle
          },
          {
            title: Tsrv.getI18nByPath('system.compoKey.toolbar'),
            list: tableTemp.content.toolbar
          },
          {
            title: Tsrv.getI18nByPath('system.compoKey.tableDataSetting'),
            list: tableTemp.content.tableDataSetting
          }
        ]
      });

      this.saveDetailToConfig();
    }
  }

  /**
   * 分组移除
   */
  private groupRemove(type: string, index: number) {
    this.$Modal.confirm({
      title: Tsrv.getI18nByPath('prompt.isDeleteData') as string,
      content: Tsrv.getI18nByPath('prompt.isDeleteData') as string,
      onOk: () => {
        if (type === 'form') {
          const formPanels = this.current.config.formPanels;
          formPanels.splice(index, 1);
          this.formGroup.splice(index, 1);
        } else if (type === 'table') {
          const tablePanels = this.current.config.tablePanels;
          tablePanels.splice(index, 1);
          this.tableGroup.splice(index, 1);
        }
        this.saveDetailToConfig();
      }
    });
  }

  /**
   * 分组切换显示
   */
  private groupChange(index: string) {
    this.activeGroup = index === this.activeGroup ? '' : index;
  }

  /**
   * 单据表格分组切换显示
   */
  private tableGroupSwitch(index: number) {
    this.activeTableGroup = index === this.activeTableGroup ? undefined : index;
  }

  /**
   * 动态修改···值（v-modal）
   */
  setEnabledValue(val) {
    if (Tsrv.utils.noValue(this.current.config.triggerEvent)) {
      this.current.config.triggerEvent = {};
      this.current.config.triggerEvent.rowDbClick = val;
    } else {
      this.current.config.triggerEvent.rowDbClick = val;
    }
  }

  onFunNameBlur(e) {
    // 判断是否是新建功能还是修改功能
    if (
      !Tsrv.utils.noValue(
        this.GT_compBox.getCompMergeName(this.G_compID, 'oSetupPanel').config
      ) ||
      Tsrv.utils.noValue(this.current.config.name)
    ) {
      return;
    }
    Tsrv.exists(Tsrv.globalVar.dbType.MYSQL, Tsrv.globalVar.tableName.SYS_FUN, {
      title: this.current.config.name
    }).then(([b, err]) => {
      if (err) {
        this.$msg(err);
      } else {
        if (b) {
          this.current.config.name = '';
          this.saveDetailToConfig(e);
          this.$msg(Tsrv.getI18nByValue('功能名已存在'));
        }
      }
    });

    // this.saveDetailToConfig(e);
  }

  onTablesNameBlur(e: any, idx: number) {
    if (Tsrv.utils.noValue(this.current.config.tablePanels[idx].label)) {
      return;
    }
    if (
      this.panelTabelName.findIndex(
        tableName => tableName === this.current.config.tablePanels[idx].label
      ) === idx
    ) {
      return;
    }
    Tsrv.exists(Tsrv.globalVar.dbType.MYSQL, Tsrv.globalVar.tableName.SYS_FUN, {
      title: this.current.config.tablePanels[idx].label
    }).then(([b, err]) => {
      if (err) {
        this.$msg(err);
      } else {
        if (b) {
          this.current.config.tablePanels[idx].label = '';
          this.saveDetailToConfig(e);
          this.$msg(Tsrv.getI18nByValue('功能名已存在'));
        }
      }
    });
  }

  // 获取当前组件字段
  private getCurrentAllFields() {
    // 情况一：没有选择字段，二：重新获取剩余分组字段（过滤掉已分组的字段）
    this.currentAllFields = [];
    if (this.current.config.tableColumns !== undefined) {
      this.currentAllFields = [];
      this.current.config.tableColumns.forEach((el: any) => {
        this.currentAllFields.push({ key: el.fieldID, label: el.field });
      });
    }
    if (this.current.config.tableDataSource !== undefined) {
      this.current.config.tableDataSource.main.fields.forEach((el: any) => {
        this.currentAllFields.push({ key: el.fieldID, label: el.field });
      });
    }
  }

  private getPanelTableName() {
    const current = this.GT_command.Tsetup.component.current;
    this.panelTabelName.length = 0;
    if (current.name === N_oSetupPanel.N_comps.COMP_NAME.BASE_PANEL) {
      current.config.tablePanels.forEach(el => {
        this.panelTabelName.push(el.label);
      });
    }
  }

  private getAddonActions() {
    const basic = {
      openFun: true,
      closeFun: true,
      searchFilter: true
    };

    const table = {
      rowSelected: true
    };
    if (!Tsrv.utils.noValue(this.GT_command.Tsetup.component?.current?.name)) {
      switch (this.GT_command.Tsetup.component.current.name) {
        case N_oSetupPanel.N_comps.COMP_NAME.BASE_GRID:
          return Tsrv.utils.merge(basic, table);

        case N_oSetupPanel.N_comps.COMP_NAME.REF_BASE_GRID:
          return Tsrv.utils.merge(basic, table);

        case N_oSetupPanel.N_comps.COMP_NAME.BASE_VIEW:
          return Tsrv.utils.merge(basic, table);

        default:
          return basic;
      }
    }
    return basic;
  }

  private toolbarChange(val: boolean, btnName: string, btnConf: any) {
    btnConf.list[btnName] = val;
    if (btnName === 'audit' || btnName === 'unaudit') {
      if (val) {
        btnConf.list['requestAudit'] = !val;
        btnConf.list['auditStatus'] = !val;
        btnConf.toolbarConf['requestAudit'].disabled = val;
        btnConf.toolbarConf['auditStatus'].disabled = val;
      } else {
        if (!btnConf.list['audit'] && !btnConf.list['unaudit']) {
          btnConf.toolbarConf['requestAudit'].disabled = val;
          btnConf.toolbarConf['auditStatus'].disabled = val;
        }
      }
    } else if (btnName === 'requestAudit' || btnName === 'auditStatus') {
      if (val) {
        btnConf.list['audit'] = !val;
        btnConf.list['unaudit'] = !val;
        btnConf.toolbarConf['audit'].disabled = val;
        btnConf.toolbarConf['unaudit'].disabled = val;
      } else {
        if (!btnConf.list['requestAudit'] && !btnConf.list['auditStatus']) {
          btnConf.toolbarConf['audit'].disabled = val;
          btnConf.toolbarConf['unaudit'].disabled = val;
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.tab-row {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  .check {
    display: flex;
    line-height: 24px;
    .check-title {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}
.module {
  display: flex;
  flex-direction: column;
}

.group-module ::v-deep .renderSwitch {
  width: 146px !important;
}
.group-module {
  .group-cell {
    background-color: #fafbfb;
    display: none;
    padding: 0 14px;
    .title {
      float: left;
      width: 100%;
    }
  }
  .group-title {
    height: 36px;
    line-height: 36px;
    background-color: #e7e8e9;
    border-radius: var(--default-border-radius-base);
    padding: 0 14px;
    .o-i18n-selector ::v-deep {
      width: 200px;
      float: left;
      .ivu-input {
        border: 0;
        background-color: transparent;
      }
      .item-render {
        background-color: #e7e8e9;
      }
    }
    .ivu-icon {
      transition: none;
      float: right;
      padding: 12px 5px;
      cursor: pointer;
      margin-right: -5px;
    }
  }
  .active {
    border-radius: var(--default-border-radius-base);
    overflow: hidden;
    .group-cell {
      display: block;
    }
    .group-title {
      .ivu-icon {
        transform: rotate(-180deg);
      }
    }
  }
  .forms-layout {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    span {
      font-size: 12px;
      float: left;
      display: block;
      // line-height: 22px;
      line-height: 3;
      width: 80px;
      padding-right: 10px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      // height: 22px;
      white-space: nowrap;
    }
  }
}

.new-btn ::v-deep {
  position: absolute;
  right: 0;
  top: 12px;
  .ivu-icon-ios-add-circle {
    font-size: 18px;
    // color: #666;
  }
  .ivu-select-dropdown {
    left: -80px !important;
  }
}

.connect-module {
  .comp-btn-chk {
    cursor: pointer;
  }
  .new-btn ::v-deep {
    .ivu-tabs {
      overflow: visible;
      z-index: 1;
      .ivu-tabs-bar {
        top: 10px;
        z-index: 0;
        .ivu-tabs-tab {
          width: 122px;
        }
      }
      .ivu-tabs-content {
        // margin-top: 30px;
        margin-top: 20px;
        overflow: visible !important;
      }
    }
    .ivu-select-dropdown {
      width: 320px;
      height: 260px;
      left: -300px !important;
    }
    .connect-confirm {
      position: absolute;
      bottom: 10px;
      right: 26px;
      button {
        float: right;
        margin-left: 15px;
      }
    }
  }
  .ivu-select ::v-deep {
    .ivu-select-dropdown {
      width: auto;
      left: auto !important;
    }
  }
  .connect-switch {
    position: absolute;
    right: 0;
    top: 4px;
  }
  .search-connect {
    padding: 10px;
    .operation-warning {
      border: 1px solid red !important;
    }
    .search-select-container {
      padding: 6px;
      border: 1px solid #eaebef;
      display: flex;
      justify-content: space-between;
      .search-select {
        width: 50%;
        margin-right: 5px;
        .ivu-select {
          margin-bottom: 3px;
        }
      }
      .cust-input {
        width: 50%;
        .ivu-input-wrapper {
          margin-bottom: 3px;
        }
      }
    }
  }
  .refresh-connect {
    margin: 0 36px;
    .ivu-select {
      margin-bottom: 18px;
      width: 247px;
    }
  }
  .connect-result {
    position: relative;
    .ivu-icon {
      position: absolute;
      padding: 16px;
      font-size: 18px;
      right: 0px;
      cursor: pointer;
      top: 0;
    }
    .connect-result-search {
      .result-search {
        width: 100%;
        // height: 80px;
        background-color: cadetblue;
        border-radius: 10px;
        padding: 6px 50px 6px 20px;
        text-align: left;
        // line-height: 50px;
        color: #fff;
        font-weight: bold;
        margin: 10px 0;
        position: relative;
        .result-search-item {
          display: flex;
          flex-direction: column;
        }
      }
    }
    .connect-result-refresh {
      .result-refresh {
        width: 100%;
        height: 50px;
        background-color: coral;
        border-radius: 10px;
        padding: 0 50px 0 20px;
        text-align: left;
        line-height: 50px;
        color: #fff;
        font-weight: bold;
        margin: 10px 0;
        position: relative;
      }
    }
  }
  .qbe-search {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    .db-label-value {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
  .label-value {
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    & > span {
      white-space: nowrap;
      &::after {
        content: '：';
        margin: 0 5px;
      }
    }
    ::v-deep.o-m2o-selector {
      flex: 1;
    }
    .rest-fill {
      flex: 1;
    }
  }

  .end-mark-conf {
    align-items: flex-start;
    & > span {
      line-height: 2.5;
    }
  }
}
.attr-cell {
  float: left;
  margin: 7px 0;
}
.collapse-container ::v-deep .ivu-collapse-header {
  padding-left: 0px;
}
.table-group {
  border-radius: var(--default-border-radius-base);
  margin-bottom: 5px;
  > .title {
    display: none;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    margin-bottom: -10px;
  }
  .table-content {
    display: none;
    padding: 7px 0 14px;
    background-color: rgba(250, 251, 251);
    padding: 0 15px;
    // .action-module {
    //   background-color: #4d131328;
    // }
  }
  .table-title {
    height: 36px;
    width: 100%;
    border-radius: var(--default-border-radius-base);
    background-color: #e7e8e9;
    cursor: pointer;
    line-height: 36px;
    padding: 0 14px;
    .ivu-icon {
      transition: none;
      float: right;
      padding: 12px 5px;
      cursor: pointer;
      margin-right: -5px;
    }
  }
}
.active {
  border-radius: var(--default-border-radius-base);
  .table-content {
    display: block;
  }
  .table-title {
    .ivu-icon {
      transform: rotate(-180deg);
    }
  }
}
.ref-comp {
  border: none;
  margin-top: 6px;
  background-color: transparent;
  .title {
    margin: 0 10px 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add {
      cursor: pointer;
    }
  }
  .ref-comp-table {
    display: flex;
    align-items: center;
    background-color: #fafafa;
    margin: 6px;
    .remove {
      margin: 0px 5px 0px 6px;
      width: 16px;
      cursor: pointer;
    }
    .m2o {
      flex: auto;
    }
  }
  .ref-comps {
    border: 1px solid #eaebef;
  }

  .module-setting {
    margin-top: 10px;
    .title {
      line-height: 2.5;
      margin: 0 10px 0 0;
    }
    .form-style {
      display: flex;
      padding-left: 10px;
      .style-setting {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 50%;
      }
    }
  }
}
.fit-rows {
  margin-left: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  .fit-rows-content {
    flex: 4;
    display: flex;
    align-items: center;
  }
  > span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2.5;
    display: flex;
    justify-content: space-between;
    &::after {
      content: '：';
      display: flex;
      justify-content: space-between;
    }
  }
}
.span-rows {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-wrap: nowrap;
  overflow: hidden;
  .content {
    flex: auto;
    display: flex;
    align-items: center;
  }
  > span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2.5;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    // &::after {
    //   content: '：';
    //   display: flex;
    //   justify-content: space-between;
    // }
  }
}
.fields-group {
  margin-left: 10px;
  margin-bottom: 10px;
  position: relative;
  .field-group-item {
    padding-top: 5px;
    .query-link {
      ::v-deep > .ivu-icon {
        position: absolute;
        top: 5px;
        right: 0;
        font-size: 14px;
      }
    }
  }
}
</style>
